import accessServices from '@/services/system/access';
import services from '@/services/system/auth';
import {
  // AlipayOutlined,
  LockOutlined,
  // MobileOutlined,
  // TaobaoOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {
  LoginFormPage,
  ProConfigProvider,
  // ProFormCaptcha,
  // ProFormCheckbox,
  ProFormText,
} from '@ant-design/pro-components';
import {
  // Divider, Space,
  Tabs,
  message,
  theme,
} from 'antd';
// import type { CSSProperties } from 'react';
import { useState } from 'react';
import { FormattedMessage, history, useModel } from 'umi';

const { queryAccess } = accessServices.AccessController;
type LoginType = 'phone' | 'account';

// const iconStyles: CSSProperties = {
//   color: 'rgba(0, 0, 0, 0.2)',
//   fontSize: '18px',
//   verticalAlign: 'middle',
//   cursor: 'pointer',
// };

interface FormProps<FieldType> {
  // 其他属性...
  login: (values: FieldType) => void;
}
type FieldType = {
  username?: string;
  password?: string;
};

const { login } = services.AuthController;

const Page = () => {
  const [loginType, setLoginType] = useState<LoginType>('account');
  const { token } = theme.useToken();
  const [messageApi, contextHolder] = message.useMessage();

  const { initialState, setInitialState } = useModel('@@initialState');

  //const history = useHistory();

  const loginHandler: FormProps<FieldType>['login'] = async (values) => {
    //const { username, password } = values;
    const formData = new FormData(); // 初始化 FormData
    formData.append('username', values.username || ''); // 添加 username
    formData.append('password', values.password || ''); // 添加 password
    const res = await login(formData);
    if (res.status === 200) {
      sessionStorage.setItem('token', res.headers.authorization);
      messageApi.open({
        type: 'success',
        content: '登录成功！',
        duration: 1,
        onClose: async () => {
          const accessRes = await queryAccess();
          setInitialState({
            ...initialState,
            token: res.headers.authorization,
            name: values.username,
            access: accessRes.data,
          });
          if (values.username) {
            sessionStorage.setItem('name', values.username);
            history.push('/home');
          }
        },
      });
    }
  };

  return (
    <>
      {contextHolder}
      <div
        style={{
          backgroundColor: 'white',
          height: '100vh',
        }}
      >
        <LoginFormPage
          onFinish={loginHandler}
          backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
          //logo="https://github.githubassets.com/favicons/favicon.png"
          backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
          title="Nebula Admin"
          containerStyle={{
            backgroundColor: 'rgba(0, 0, 0,0.65)',
            backdropFilter: 'blur(4px)',
          }}
          subTitle={
            <>
              <FormattedMessage id="login.subtitle" />
            </>
          }
          // activityConfig={{
          //   style: {
          //     boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
          //     color: token.colorTextHeading,
          //     borderRadius: 8,
          //     backgroundColor: 'rgba(255,255,255,0.25)',
          //     backdropFilter: 'blur(4px)',
          //   },
          //   title: '活动标题，可配置图片',
          //   subTitle: '活动介绍说明文字',
          //   action: (
          //     <Button
          //       size="large"
          //       style={{
          //         borderRadius: 20,
          //         background: token.colorBgElevated,
          //         color: token.colorPrimary,
          //         width: 120,
          //       }}
          //     >
          //       去看看
          //     </Button>
          //   ),
          // }}
          actions={
            <div
              style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                flexDirection: 'column',
              }}
            >
              {/* <Divider plain>
                <span
                  style={{
                    color: token.colorTextPlaceholder,
                    fontWeight: 'normal',
                    fontSize: 14,
                  }}
                >
                  其他登录方式
                </span>
              </Divider>
              <Space align="center" size={24}>
                <div
                  style={{
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    flexDirection: 'column',
                    height: 40,
                    width: 40,
                    border: '1px solid ' + token.colorPrimaryBorder,
                    borderRadius: '50%',
                  }}
                >
                  <AlipayOutlined style={{ ...iconStyles, color: '#1677FF' }} />
                </div>
                <div
                  style={{
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    flexDirection: 'column',
                    height: 40,
                    width: 40,
                    border: '1px solid ' + token.colorPrimaryBorder,
                    borderRadius: '50%',
                  }}
                >
                  <TaobaoOutlined style={{ ...iconStyles, color: '#FF6A10' }} />
                </div>
                <div
                  style={{
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    flexDirection: 'column',
                    height: 40,
                    width: 40,
                    border: '1px solid ' + token.colorPrimaryBorder,
                    borderRadius: '50%',
                  }}
                >
                  <WeiboOutlined style={{ ...iconStyles, color: '#1890ff' }} />
                </div>
              </Space> */}
            </div>
          }
        >
          <Tabs
            centered
            activeKey={loginType}
            onChange={(activeKey) => setLoginType(activeKey as LoginType)}
            items={[
              {
                key: 'account',
                label: '账号密码登录',
                children: '账号密码登录的内容区域',
              },
              // {
              //   key: 'phone',
              //   label: '手机号登录',
              //   children: '手机号登录的内容区域',
              // },
            ]}
          />
          {loginType === 'account' && (
            <>
              <ProFormText
                name="username"
                fieldProps={{
                  size: 'large',
                  prefix: (
                    <UserOutlined
                      style={{
                        color: token.colorText,
                      }}
                      className={'prefixIcon'}
                    />
                  ),
                }}
                placeholder={'用户名: admin or user'}
                rules={[
                  {
                    required: true,
                    message: '请输入用户名!',
                  },
                ]}
              />
              <ProFormText.Password
                name="password"
                fieldProps={{
                  size: 'large',
                  prefix: (
                    <LockOutlined
                      style={{
                        color: token.colorText,
                      }}
                      className={'prefixIcon'}
                    />
                  ),
                }}
                placeholder={'密码: 123456'}
                rules={[
                  {
                    required: true,
                    message: '请输入密码！',
                  },
                ]}
              />
            </>
          )}
          {/* {loginType === 'phone' && (
            <>
              <ProFormText
                fieldProps={{
                  size: 'large',
                  prefix: (
                    <MobileOutlined
                      style={{
                        color: token.colorText,
                      }}
                      className={'prefixIcon'}
                    />
                  ),
                }}
                name="mobile"
                placeholder={'手机号'}
                rules={[
                  {
                    required: true,
                    message: '请输入手机号！',
                  },
                  {
                    pattern: /^1\d{10}$/,
                    message: '手机号格式错误！',
                  },
                ]}
              />
              <ProFormCaptcha
                fieldProps={{
                  size: 'large',
                  prefix: (
                    <LockOutlined
                      style={{
                        color: token.colorText,
                      }}
                      className={'prefixIcon'}
                    />
                  ),
                }}
                captchaProps={{
                  size: 'large',
                }}
                placeholder={'请输入验证码'}
                captchaTextRender={(timing, count) => {
                  if (timing) {
                    return `${count} ${'获取验证码'}`;
                  }
                  return '获取验证码';
                }}
                name="captcha"
                rules={[
                  {
                    required: true,
                    message: '请输入验证码！',
                  },
                ]}
                onGetCaptcha={async () => {
                  message.success('获取验证码成功！验证码为：1234');
                }}
              />
            </>
          )} */}
          {/* <div
            style={{
              marginBlockEnd: 24,
            }}
          >
            <ProFormCheckbox noStyle name="autoLogin">
              自动登录
            </ProFormCheckbox>
            <a
              style={{
                float: 'right',
              }}
            >
              忘记密码
            </a>
          </div> */}
        </LoginFormPage>
      </div>
    </>
  );
};

export default () => {
  return (
    <ProConfigProvider dark>
      <Page />
    </ProConfigProvider>
  );
};
